{% extends 'user/base.html' %}
{% block title %}
<title>故事页面</title>
{% endblock %}
{% block content %}
<section class="pt-lg-0" id="story_bg">
    <div class="container-fluid img-top">
        <img style="width:100%; height: 220px" src="{{ url_for('static', filename='front/images/story/story-bg.jpg') }}" alt="故事背景大图">
    </div>
</section>

<div class="container mt-4 mb-5 pl-lg-7">
    <div class="row">
        <!-- 最新故事、鲜花故事 -->
        <div class="col-md-8">
            <!-- 最新故事 -->
            <h4 class="font-weight-bold border-bottom badge-soft-info"><span>{{ category_names[0] }}</span></h4>
            <div style="background-image: url({{ url_for('static', filename='front/images/story/story-bg.jpg') }}); height: 250px; background-size: cover; background-repeat: no-repeat;"></div>
            {% if latest_stories %}
                {% for item in latest_stories[:3] %}
                    <div class="position-relative border-0 d-flex justify-content-between">
                        <div class="card-body px-0 pb-0 d-flex flex-column">
                            <h6>
                                <a class="text-dark" href="/story/article/{{ item.id }}">{{ item.title }}</a>
                            </h6>
                            <div>
                                <small class="d-block"><a class="text-muted" href="javascript:0">来源丨minge</a></small>
                                <small class="text-muted">{{ item.published_date }}</small>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            {% else %}
                <p>暂无最新故事</p>
            {% endif %}

            <!-- 鲜花故事 -->
            <h4 class="font-weight-bold border-bottom badge-soft-success"><span>{{ category_names[1] }}</span></h4>
            <div class="mb-3 d-flex flex-column justify-content-between" id="items-container">
                {% for item in flower_stories %}
                    <div class="mb-3 d-flex justify-content-between">
                        <div class="pr-3">
                            <h6>
                                <a class="text-dark" href="/story/article/{{ item.id }}">{{ item.title }}</a>
                            </h6>
                            <small class="d-block"><a class="text-muted" href="javascript:0">来源丨minge</a></small>
                            <small class="text-muted">{{ item.published_date }}</small>
                        </div>
                        <img height="100" width="180" src="../static/front/images/home/idea-left.svg" alt="鲜花故事图片">
                    </div>
                {% endfor %}
            </div>

            <!-- 分页器结构 -->
            <div class="pagination" id="pagination-container">
                {% for i in range(1, total_pages.flower + 1) %}
                    <a href="javascript:void(0)"
                       class="page-link {{ 'active' if i == current_page else '' }}"
                       data-page="{{ i }}">{{ i }}</a>
                {% endfor %}
            </div>
        </div>

        <!-- 目前流行 -->
        <div class="col-md-4 pl-4">
            <div class="sticky-top z-1">
                <h4 class="font-weight-bold border-bottom badge-soft-danger"><span>{{ category_names[2] }}</span></h4>
                <ol class="list-featured">
                    {% if popular_stories %}
                        {% for item in popular_stories %}
                            <li>
                                <h6>
                                    <a href="/story/article/{{ item.id }}" class="text-dark">{{ item.title }}</a>
                                </h6>
                            </li>
                        {% endfor %}
                    {% else %}
                        <li>
                            <h6>
                                <a href="#" class="text-dark">暂无流行故事</a>
                            </h6>
                        </li>
                    {% endif %}
                </ol>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extendjs %}
<!-- 在story.html的block content尾部添加 -->
<script src="{{ url_for('static', filename='vendor/axios.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. 分页点击事件拦截
    document.querySelectorAll('.page-link').forEach(link => {
        link.addEventListener('click', async function(e) {
            e.preventDefault();
            const page = this.getAttribute('data-page');

            // 2. 显示加载状态
            const container = document.getElementById('items-container');

            try {
                // 3. 发起AJAX请求[3](@ref)
                const response = await axios.get(`/story/get_article_data?page=${page}&category=2`);
                renderStories(response.data.items);
                updatePagination(page);
            } catch (error) {
                console.error('分页加载失败:', error);
                container.innerHTML = `<div class="error-msg">数据加载失败，请重试</div>`;
            }
        });
    });

    // 动态渲染故事列表
    function renderStories(items) {
        const container = document.getElementById('items-container');
        container.innerHTML = items.map(item => `
            <div class="mb-3 d-flex justify-content-between">
                <div class="pr-3">
                    <h6><a class="text-dark" href="/story/article/${item.id}">${item.title}</a></h6>
                    <small class="d-block text-muted">来源丨minge</small>
                    <small class="text-muted">${new Date(item.published_date).toLocaleDateString()}</small>
                </div>
                <img height="100" width="180" src="../static/front/images/home/idea-left.svg" alt="鲜花故事图片">
            </div>
        `).join('');
    }

    // 更新分页状态
    function updatePagination(currentPage) {
        document.querySelectorAll('.page-link').forEach(link => {
            link.classList.remove('active');
            if(link.getAttribute('data-page') === currentPage.toString()) {
                link.classList.add('active');
            }
        });
    }
});
</script>
{% endblock %}

